<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			P{
				display: inline-block;
				width: 70px;
				height: 35px;
				line-height: 35px;
				border: 1px solid #38f;
				text-align: center;
				margin: 5px;
			}
		</style>
	</head>
	<body>
		<!--<p>1*1=1</p>-->
		<script type="text/javascript">
			document.write("<h4>第一种做法</h4>");
			for (var i = 1; i < 10; i++) {
				for (var f = 1; f < i+1 ; f++) {
					document.write("<p>"+f+"*"+i+"="+ i*f +"</P>")
				}
				document.write("<br />")
			}
			document.write("<hr>");
			
			document.write("<h4>第二种做法</h4>");
			for (var i = 1; i < 10; i++) {
				for(var j = i;j < 10;j++){
					//console.log(j)
					document.write("<p>"+i+"*"+j+"="+i*j+"</p>")
				}
				document.write("<br/>");
			}
			
			document.write("<hr />")
			document.write("<h4>第三种做法</h4>");
			for (var i = 9; i > 0; i--) {
				for(var e = 1 ; e < i+1; e++){
					document.write("<p>"+i+"*"+e+"="+i*e+"</P>")
				}
				document.write("<br />");
			}
			
			document.write("<hr />")
			document.write("<h4>第四种做法</h4>");
			for (var i = 9; i > 0; i--) {
				for(var j = i; j<10;j++){
					document.write("<p>"+i+"*"+j+"="+i*j+"</p>")
				}
				document.write("<br />");
			}
		</script>
	</body>
</html>